import React from 'react';

export class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App 父组件</h1>
        {/* Consumer 内部的值传递给了子元素，类比作用域插槽 */}
        <Consumer>{(value) => <h2>{value}</h2>}</Consumer>
      </div>
    );
  }
}

// Consumer 组件
class Consumer extends React.Component {
  constructor() {
    super();
    // Consumer 内的数据
    this.state = {
      value: 'Consumer组件内的值',
    };
  }

  render() {
    console.log(this.props);
    // 如果传入的子元素是一个函数，可以调用这个函数
    // return <div>{this.props.children(this.state.value)}</div>;
    return <div>Consumer 组件{this.props.children(this.state.value)}</div>;
  }
}
